<template>
    <div>
        <img :src="store.state.musicListDetail.coverImgUrl" alt="" class="bgimg">
    </div>
    <van-sticky>
        <div class="musicListDetailTop">
            <img :src="store.state.musicListDetail.coverImgUrl" alt="" class="topimg">
            <div class="topLeft">
                <van-icon name="arrow-left" size="0.5rem" @click="onClickLeft" />
                <span>歌单</span>
            </div>
            <div class="topRight">
                <van-icon name="search" size="0.5rem" />
                <van-icon name="wap-nav" size="0.5rem" />
            </div>
        </div>
    </van-sticky>
    <div class="musicListDetailInfo">
        <img :src="store.state.musicListDetail.coverImgUrl" class="smimg">
        <div class="infoRight">
            <div class="name">{{ store.state.musicListDetail.name }}</div>
            <div class="creator">
                <img :src="store.state.musicListDetail.creator.avatarUrl" alt="" class="avaimg">
                <span>{{ store.state.musicListDetail.creator.nickname }}</span>
                <van-icon name="arrow" />
            </div>
            <div class="description">
                <span>{{ store.state.musicListDetail.description }}</span>
            </div>
        </div>
    </div>
    <div class="musicListDetailOper">
        <div class="iconItem" @click="goCommentDetail">
            <van-icon name="chat-o" size="0.5rem" />
            {{ changeCount(+store.state.musicListDetail.commentCount) }}
        </div>
        <div class="iconItem" @click="showShareSheet">
            <van-icon name="share-o" size="0.5rem" />
            {{ changeCount(+store.state.musicListDetail.shareCount) }}
        </div>
        <div class="iconItem">
            <van-icon name="down" size="0.5rem" />
            下载
        </div>
        <div class="iconItem">
            <van-icon name="passed" size="0.5rem" />
            多选
        </div>
    </div>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" />
</template>

<script lang='ts' setup>
import store from '@/store';
import { ref } from 'vue';
import router from '@/router';
const showShare = ref(false);
const options = [
    [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
    ],
    [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
    ],
]
const onClickLeft = () => {
    history.back()
}
const changeCount = (num: number) => {
    if (num >= 100000000) {
        return (num / 100000000).toFixed(1) + '亿'
    } else if (num >= 10000) {
        return (num / 10000).toFixed(1) + '万'
    }
    return num
}
const showShareSheet = () => {
    showShare.value = true
}
const goCommentDetail = () => {
    router.push({ path: '/commentDetail', query: { id: store.state.musicListDetail.id } })
}
</script>
 
<style lang = "less" scoped>
.bgimg {
    position: absolute;
    z-index: -1;
    width: 100%;
    height: 12rem;
    filter: blur(0.6rem);
}

.musicListDetailTop {
    height: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    color: #fff;

    .topimg {
        width: 100%;
        height: 1rem;
        z-index: -1;
        position: absolute;
        filter: blur(0.6rem);
    }

    .topLeft {
        width: 20%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-left: 0.2rem;
    }

    .topRight {
        width: 20%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-right: 0.2rem;
    }
}

.musicListDetailInfo {
    margin-top: 0.2rem;
    margin-left: 0.2rem;
    display: flex;

    .smimg {
        width: 40%;
        border-radius: 0.2rem;
    }

    .infoRight {
        width: 56%;
        margin-left: 0.2rem;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        color: #999;
        font-weight: 500;

        .name {
            font-weight: 900;
            color: #fff;
        }

        .creator {
            display: flex;
            align-items: center;

            .avaimg {
                width: 15%;
                border-radius: 100%;
                margin-right: 0.15rem;
            }
        }

        .description {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
    }


}

.musicListDetailOper {
    margin-top: 0.4rem;
    display: flex;
    align-items: center;
    justify-content: space-around;
    color: #fff;

    .iconItem {
        display: flex;
        flex-direction: column;
        align-items: center;
    }
}
</style>